<script setup>
import { ref } from 'vue';
import request from '../axios/axios.js'
//定义变量
let inputUserName=ref("");
//用户密码
let inputUserPassword=ref("")
//用户性别
let inputUserSex=ref("")
//用户学号
let inputUserXh=ref("")
//用户身份
let inputUserStatus=ref("")
//用户电话
let inputUserPhone=ref("")

//用户身份 1 管理员  0 普通用户

//查询用户名
let queryUserName=ref("")
//用户idi
let inputUserId=ref("")

//axios

//管理员查询用户信息
async function queryUserInfo(){
    //查询用户信息
    let {data} = await request.get("/adminQueryUserInfo",{
        params:{
            username:queryUserName.value
        }
    });

    if(data.statusCode==200){
        console.log(data)
        //查询成功
        inputUserId.value=data.data.userId
        inputUserName.value=data.data.userName    
        inputUserPassword.value=data.data.userPassword
        inputUserSex.value=data.data.userSex     
        inputUserXh.value=data.data.userXh      
        inputUserStatus.value=data.data.userStatus  
        inputUserPhone.value=data.data. userPhone
        alert(data.message)
    }else{
        //查询失败
        alert(data.message)
    }
}

//管理员修改用户信息
async function alterUserInfo(){
        let {data} =await request.get("/adminAlterUserInfo",{
            params:{
                userName:inputUserName.value,
                userPassword:inputUserPassword.value,
                userSex:inputUserSex.value,
                userXh:inputUserXh.value,
                userStatus:inputUserStatus.value,
                userPhone:inputUserPhone.value
            }
        })
        if(data.statusCode==200){
            alert(data.message);

        }else{
            alert(data.message);
        }
    }
</script>

<template>
    管理员用户管理界面
    修改界面

    <div class="Dormitory">
        
        <!-- 通过用户名查询 -->

        <div class="DormitoryName">
            用户名<input type="text" v-model="queryUserName" /><button @click="queryUserInfo()">查询</button>
        </div>
        
        <!-- 用户信息展示 -->
        <table style="width: 100%; height: 100%;">     

            <tr class="trb">
                <td class="name">用户ID</td ><td class="content"  > <input type="text" readonly  v-model="inputUserId" /></td>
            </tr>
            <tr class="trb">
                <td class="name">用户名字</td ><td class="content"  > <input type="text"  v-model="inputUserName" /></td>
            </tr>

            <tr class="trb">
                <td class="name">用户密码</td ><td class="content" ><input type="text"  v-model="inputUserPassword" /></td>
            </tr>    
            <tr class="trb">
                <td class="name">用户性别</td ><td class="content" ><input type="text"  v-model="inputUserSex" /></td>
            </tr>         
            <tr class="trb">
                <td class="name">用户学号</td ><td class="content" ><input type="text"  v-model="inputUserXh" /></td>
            </tr>  
            <tr class="trb">
                <td class="name">用户电话</td ><td class="content" ><input type="text"  v-model="inputUserPhone" /></td>
            </tr>  
            <tr class="trb">
                <td class="name">用户身份</td ><td class="content" ><input type="text"  v-model="inputUserStatus" /></td>
            </tr>  
        </table>

        <div class="DormitoryName">
       
                修改用户:<button @click="alterUserInfo()()">修改</button>
        </div>
    </div>
</template>

<style scoped>

.name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: chocolate;
   }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 20%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }
</style>
